<template>
  <mavon-editor
    ref="md"
    v-model="content"
    @imgAdd="imgAdd"
    @change="changeMavon"
    @imgDel="imgDel"
    style="height: 80%; width: 100%"
  />
</template>

<script>
import { mavonEditor } from "mavon-editor";

export default {
  name: "BaseRichTextEdit",
  components: {
    mavonEditor,
  },
  data() {
    return {
      content: ``,
    };
  },
  methods: {
    async imgAdd(pos, file) {
      /**
       * 1、调用上传图片接口
       * 2、将返回的url替换到文本原位置
       * */
      const formData = new FormData();
      formData.append("file", file);
      // const res = await UlpoadFileImg({ data: formData });
      // if (res.code == 200) {
      // console.log("获取返回地址：", res);
      // const imgUrl = `${this.baseImageLoadingAddress}${res.data.data}`
      const imgUrl = `https://img2.baidu.com/it/u=3095176641,3134076852&fm=253&fmt=auto&app=138&f=JPEG?w=474&h=370`;
      this.$refs.md.$img2Url(pos, imgUrl);
      // }
    },
    imgDel(pos) {
      console.log("移除文件：", pos);
      const image = pos[0];
      /**
       * 获取需要删除的地址
       * 发送请求给后端做删除处理
       * 获取最后结果渲染数据
       * */
    },
    changeMavon(value, render) {
      // console.log("获取值：", value, render);
    },
  },
};
</script>

<style lang="scss" scoped>
@import url("~mavon-editor/dist/css/index.css");
em {
  font-style: italic;
}
</style>